<template>
	<div class="recommend">
		<!-------------------视频--------------->
		<section class="flash" v-for="item in $store.state.newList" v-if="video=='video'">
			<a href="javascript: void(0)">
				<div class="item_detail">
					<div class="detail_img">
						<div v-if="item.article_type==0" class="video_mask"></div>
						<h3>{{item.title}}</h3>
						<img src="~@/assets/img/loading.png" >
				        <img v-lazy="item.large_image_url" />
						<span v-if="item.article_type==0" class="iconfont icon-iconset0481" @click="say('hi')"></span>
					</div>
					<div class="item_info">
						<p v-if="item.ad_label" :class="{blue:item.ad_label=='广告'}">{{item.ad_label}}</p>
						<span>{{item.media_name}}</span>
						<span>评论 {{item.comment_count}}</span>
						<span>{{item.datetime|dateResult}}</span>
					</div>
				</div>
			</a>
		</section>
		<!------------广告位--------------->
		<section class="action" v-else-if="item.large_mode">
				<a href="javascript:void(0)" >
				    <h3>{{item.title}} </h3>
				    <div class="action_img">
				        <img src="~@/assets/img/loading.png" >
				        <img v-lazy="item.large_image_url" />
				    </div>
				    <div class="item_info">
				        <p v-if="item.label" :class="{blue:item.label=='广告',red:item.label=='置顶'}">{{item.label}}</p>
						<p v-if="item.hot==1" class="red">热</p>
				        <span class="srr">{{item.source}}</span>
				        <span class="srr">评论{{item.label_style}}</span>
				        <span class="srr">3小时前</span>
				    </div>
				</a>
			</section>
		<!---------------三个小图------------>
		<section class="threephoto" v-else-if="item.image_list.length===3">
			<a href="javascript: void(0)" >
				<div class="item_detail">
					<h3>{{item.title}}</h3>
					<div class="list_image">
						<ul class="clearfix" v-for="src in (item.image_list)">
							<li><img :src="src.url"></li>
						</ul>
					</div>
					<div class="item_info">
						<p v-if="item.label" :class="{blue:item.label=='广告',red:item.label=='置顶'}">{{item.label}}</p>
						<p v-if="item.hot==1" class="red">热</p>
						<span class="srr">{{item.source}}</span>
						<span class="srr">评论 {{item.comment_count}}</span>
						<span class="srr">9分钟前</span>
					</div>
				</div>
			</a>
		</section>
		<!---------------左边图--------------->
		<section class="left" v-else-if="item.image_list.length===0&&item.has_image">
			<a href="javascript:void(0)">
				<div class="list_text">
					<h3>{{item.title}}</h3>
					<div class="item_info">
						<p v-if="item.label" :class="{blue:item.label=='广告',red:item.label=='置顶'}">{{item.label}}</p>
						<p v-if="item.hot==1" class="red">热</p>							
						<span class="srr">{{item.source}}</span>
						<span class="srr">评论{{item.comment_count}}</span>
					</div>
				</div>
				<div class="list_img">
					<img src="~@/assets/img/loading.png" >
			        <img v-lazy="item.image_url" />
				</div>
			</a>
		</section>
        <!---------------无图----------------->
		<section class="nophoto"  v-else-if="item.image_list.length===0&&!item.has_image">
			<a href="javascript: void(0)" class="article_link clearfix ">
				<div class="item_detail">
					<h3>{{item.title}}</h3>
					<div class="item_info">
						<p v-if="item.label" :class="{blue:item.label=='广告',red:item.label=='置顶'}">{{item.label}}</p>
						<p v-if="item.hot==1" class="red">热</p>
						<span class="srr">专题</span>
						<span class="srr">评论 {{item.comment_count}}</span>
						<span class="srr">2分钟前</span>
					</div>
				</div>
			</a>
		</section>
	    
	    
	    <p>加载中...</p>
		<totop></totop>
		<!--<div :class="{load:is,load_show:load}">
			为你推荐5篇文章
		</div>-->
		<!--<p class="bot_load">{{$store.state.bot_load}}</p>-->
	</div>
</template>

<script>
	import axios from 'axios';
	import totop from "@/components/totop";
	
	let isadd=true;
	let timer;
//	let n=1;
	export default{
		mounted(){
//			this.addList(),
			window.addEventListener("scroll",this.jianting)
		},	
		data(){
			return {
				newList:[],
				contentList:[],
			}
		},
		computed:{
			video:function(){
				return this.$route.query.name
			}
		},
		methods:{
			_getRec(){
				var c_url = this.$route.query.name;
				this.$store.commit('first_init',{
					url:c_url
				})
			},
//			addList(){
//				let _this = this;
//					window.addEventListener("scroll",()=>{
//						if(timer)
//						clearTimeout(timer)
//						var num = this.$store.state.count+1
//						doc = document.documentElement||document.body;
//						dis = ((doc.offsetHeight-doc.scrollTop)/doc.offsetHeight)*10|0
//						timer = setTimeout(function(){
//						if(dis<=6&&num<=3){
//							console.log(num)
//							var s_url = _this.$route.query.name;
//							_this.$store.commit('add')	
//							_this.$store.commit('_init',{
//								url:s_url,
//								n:num
//							})
//						}
//						},600)
//					})
//			}
            jianting(){
            	let _this = this;
				if(!isadd){return};
				isadd=false;
				setTimeout(()=>{
	//              1.总高度
	                var offsetHeight= document.body.offsetHeight||document.documentElement.offsetHeight;
	//              2.当前高度
	                var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
	                var dis=((offsetHeight-scrollTop)/offsetHeight)*10|0;
	                let num = _this.$store.state.count+1;
	                console.log(num)
	                isadd=true;
					if(dis<=3&&num<=3){
						console.log()
//						n++;
						var s_url = _this.$route.query.name;
						_this.$store.commit('add')	
						_this.$store.commit('_init',{
							url:s_url,
							n:num
						})
					}	
				},500)
			},
		},
		components: {
			totop
		},
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/scss/tuijian";
	@import "~@/assets/scss/flash";
	@import "~@/assets/scss/iconfont";
	.recommend{
		 position: relative;
    	top: 80px;
		p{
			padding: 10px 0;
			text-align: center;
			font-size: 16px;
			color: #A5A5A5;
		}
	}
</style>